<template>
  <div class="box-content">
    <div class="headTop">
      <div class="myflex">
        <h2>突防评估</h2>
        <div>
          <el-button type="primary" icon="el-icon-search" @click="myReselect"
            >重新选择</el-button
          >
        </div>
      </div>

      <div>
        <el-button
          type="primary"
          v-for="item in fourData"
          :key="item"
          @click="tobData(item)"
          >{{ item }}</el-button
        >
      </div>
    </div>
    <div class="bigContent" v-show="cutTab == 0">
      <div class="leftList">
        <div class="sidebarData">
          <SidebarRedFang @CheckedData='CheckedData'></SidebarRedFang>
        </div>
      </div>
      <div class="rightContent">
        <el-row :gutter="10">
          <el-col :span="8"
            ><div class="rightContent-one"><BarGraph></BarGraph></div
          ></el-col>
          <el-col :span="8"
            ><div class="rightContent-one"><Pies></Pies></div
          ></el-col>
          <el-col :span="8"
            ><div class="rightContent-one"><DarGraph></DarGraph></div
          ></el-col>
        </el-row>
        <div class="AboustRightList">
          <AboustRightList></AboustRightList>
        </div>
      </div>
    </div>
    <div class="fourTab" v-if="cutTab == 3">
      <FourTab></FourTab>
    </div>

    <Dialog
      :dialogFormVisibles="dialogFormVisibles"
      @myCancelBtn="myCancelBtn"
      @myConfirmBtn="myConfirmBtn"
    ></Dialog>
  </div>
</template>

<script>
//侧边栏
import SidebarRedFang from "./sidebar/SidebarRedFang.vue";
//echarts
import BarGraph from "./content-echarts/barGraph.vue";
import Pies from "./content-echarts/Pies.vue";
import DarGraph from "./content-echarts/dashBoard.vue";
//右下表格数据
import AboustRightList from "./List/AboustRightList.vue";
//dialog弹框
import Dialog from "@/components/Dialog.vue";

//第四个tab页
import FourTab from "./fourEchartCoutent/FourTab.vue";

import { mapState, mapMutations, mapActions } from "vuex";
export default {
  components: {
    SidebarRedFang,
    BarGraph,
    Pies,
    DarGraph,
    AboustRightList,
    Dialog,
    FourTab
  },
  data() {
    return {
      cutTab: 0,
      dialogFormVisibles: false,
      fourData: [0, 1, 2, 3],
      arrData:[]
    };
  },
  computed: {
    ...mapState(["cutTabs"]),
  },
  watch: {
    immediate: true,
    deep: true,
    cutTabs: {
      handler(value) {
        this.cutTab = value;
        if (value == 3) {
          this.fourData = [3];
        } else {
          this.fourData = [0, 1, 2, 3];
        }
      },
    },
    // arrData:{
    //   handler(val){
    //     console.log(val)
    //     if(!val.length){
    //       alert("请勾选")
    //     }else{
    //       alert("传值")
    //     }
    //   }
    // }
  },

  mounted() {
    this.cutTab = this.$store.state.cutTabs;
    if (this.cutTab == 3) {
      this.fourData = [3];
    } else {
      this.fourData = [0, 1, 2, 3];
    }
  },

  methods: {
    tobData(value) {
      this.cutTab = value;
    },

    //重新选择 - 触发弹框
    myReselect() {
      this.dialogFormVisibles = true;
    },
    //取消
    myCancelBtn() {
      this.dialogFormVisibles = false;
    },
    //确认
    myConfirmBtn() {
      this.dialogFormVisibles = false;
    },

    CheckedData(value){
      localStorage.setItem('leftChecked1',value)    //监听侧边栏数据的变化 并向本地存储数据
      // this.arrData=value
      // alert(value)
    }
  },
};
</script>

<style lang="less" scoped>
.box-content {
  .myflex {
    display: flex;
    justify-content: center;
    h2 {
      margin-right: 30px;
    }
  }
  //头部
  .headTop {
    height: 120px;
    text-align: center;
    line-height: 60px;
    border: 1px solid red;
  }
  .bigContent {
    display: flex;
    //左侧弹道
    .leftList {
      width: 300px;
      height: calc(100vh - 120px);
      border: 1px solid blue;
      margin-right: 10px;
      padding: 10px;
      //侧边栏数据
      .sidebarData {
        width: 100%;
        height: 100%;
        border: 1px solid black;
      }
    }
    //右侧内容
    .rightContent {
      width: calc(100vw - 300px);
      height: calc(100vh - 120px);
      border: 1px solid black;
      padding: 10px;
      .rightContent-one {
        width: 100%;
        height: 300px;
      }
      .AboustRightList {
        margin-top: 10px;
      }
    }
  }
  //第四个tab页
  .fourTab {
    width: calc(100vw);
    height: calc(100vh - 120px);
    border: 1px solid red;
    padding: 10px;
  }
}
</style>